<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-v-for的key属性</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        li {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <!-- 
        总结；
            a. v-for 默认可以不写 :key, 但是在将来的组件.vue中不写会报错
            b. 默认如果传入一个相同的值作为key，也会报错
            c. 而如果使用索引作为key，那么在数据前面插入一项会导致虚拟dom对比有问题
            d. 建议写key的时候，指定数据中的唯一值，推荐使用id
     -->
    <div id="demo">
        <div class="container">
            <h3>v-for的key属性</h3>
            <hr>
            <ul>
                <!-- key值是不能重复的, 定义的参数能在当前标签和内部使用 -->
                <li v-for="(item, index) in arr" :key="item.id">
                    {{ index }} - {{ item.name }}
                    <!-- <input type="text" v-model="item.name"> -->
                    <input type="text">
                </li>
            </ul>
            <button class="btn btn-success" @click="fn">点击增加</button>

        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                arr: [
                    { id: 1, name: '鲁班七号', age: 250 },
                    { id: 2, name: '李白', age: 19 },
                    { id: 3, name: '刘备', age: 28 },
                    { id: 4, name: '马可波罗', age: 39 },
                    { id: 5, name: '钟海惠', age: 38 },
                ]
            },
            methods: {
                fn() {
                    this.arr.unshift({ id: 6, name: '钟无艳', age: 22 })
                    // this.arr.push({ id: 6, name: '钟无艳', age: 22 })
                }
            }
        })
    </script>
</body>
</html>